<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/header :: common_header(~{::title}, ~{}, ~{::script})">
    <title>用户管理</title>
    <!-- My JavaScript -->
    <script src="../../static/app/sys/userlist.js" th:src="@{/app/sys/userlist.js}"></script>
</head>

<body class="easyui-layout" data-options="fit:true" style="margin:2px;">

<div data-options="region:'west',title:'部门列表'" style="width: 240px;padding: 5px;">
    <ul id="deptTree"></ul>
</div>
<div data-options="region:'center',title:'',border:false">
    <div class="easyui-layout" data-options="fit:true">
        <div data-options="region:'north',title:'用户查询',hideCollapsedContent:false,height:'auto'"
             style="padding:5px 0;">
            <form id="searchForm" method="POST" class="search-form">
                <div class="form-item">
                    <label class="label-top"> 用户名：
                        <input id="sf_username" name="username" class="easyui-textbox"/>
                    </label>
                </div>
                <div class="form-item">
                    <label class="label-top"> 电话：
                        <input id="sf_telephone" name="telephone" class="easyui-textbox"/>
                    </label>
                </div>
                <div class="form-item">
                    <label class="label-top"> 邮箱：
                        <input id="sf_mail" name="mail" class="easyui-textbox"/>
                    </label>
                </div>
                <div class="form-item">
                    <label class="label-top"> 部门：
                        <select id="sf_deptId" name="deptId"></select>
                    </label>
                </div>
                <div class="form-item">
                    <label class="label-top"> 状态：
                        <select id="sf_status" name="status"></select>
                    </label>
                </div>
                <div class="form-item">
                    <span>
                        <a href="javascript:void(0);" id="searchBtn" class="easyui-linkbutton primary"
                           data-options="iconCls:'e-icon fa fa-search'">查询</a>
                        <a href="javascript:void(0);" id="resetBtn" class="easyui-linkbutton"
                           data-options="iconCls:'e-icon fa fa-repeat'">重置</a>
                    </span>
                </div>
            </form>
        </div>
        <div data-options="region:'center'">
            <table id="userGrid" data-options="toolbar:'#userGrid-toolbar',border:false"></table>
        </div>

        <div data-options="region:'east',border:false,split:true" style="width: 280px;">
            <div id="userRelatedLayout" class="easyui-layout" data-options="fit:true">
                <div data-options="region:'north',title:'关联角色',border:false,collapsible:false,split:true"
                     style="height:200px">
                    <table id="userRoleGrid" class="easyui-datagrid"
                           data-options="fit:true,fitColumns:true,pagination:false,border:false">
                        <thead>
                        <tr>
                            <th data-options="field:'name',width:100">角色名称</th>
                            <th data-options="field:'enname',width:100">角色英文名</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div data-options="region:'center',title:'关联权限',border:false">
                    <ul id="userAclTree" class="easyui-tree"></ul>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="mm" class="easyui-menu" style="width: 120px; display: none;">
    <div permission="sys:user:add" onclick="addUserOnContext();" data-options="iconCls:'e-icon icon-blue icon-th'">添加用户</div>
</div>

<div id="dlg" class="easyui-dialog" data-options="title:'',width:650,height:380,closed:true">
    <form id="fm" class="dlg-form" method="POST">
        <input id="fm_id" name="id" type="hidden"/>
        <fieldset>
            <legend>用户信息</legend>
            <div class="form-item">
                <label class="label-top">用户名：</label>
                <input id="fm_username" name="username" class="easyui-validatebox easyui-textbox" prompt="请输入用户名"
                       data-options="required:true,validType:'username'">
            </div>
            <div class="form-item">
                <label class="label-top">昵称：</label>
                <input id="fm_nickName" name="nickName" class="easyui-validatebox easyui-textbox" prompt="请输入昵称"
                       data-options="required:true">
            </div>
            <!--<div class="form-item">
                <label class="label-top">电话：</label>
                <input id="fm_telephone" name="telephone" class="easyui-validatebox easyui-textbox"
                       data-options="validType:'mobile'">
            </div>-->
            <div class="form-item">
                <label class="label-top">邮箱：</label>
                <input id="fm_mail" name="email" class="easyui-validatebox easyui-textbox"
                       data-options="validType:'email'">
            </div>
            <div class="form-item">
                <label class="label-top">部门：</label>
                <select id="fm_deptId" name="deptId" class="easyui-validatebox easyui-comtree" prompt="请选择部门"
                        data-options="required:true"></select>
            </div>
            <div class="form-item"></div>
            <div class="form-item">
                <label class="label-top">状态：</label>
                <select id="fm_status" name="status" class="easyui-validatebox easyui-combobox">
                </select>
            </div>
            <div class="form-item" style="width:100%;">
                <label class="label-top">备注：</label>
                <input id="fm_note" name="note" class="easyui-validatebox easyui-textbox"
                       data-options="height:60,multiline:true" style="width: 460px;"/>
            </div>
        </fieldset>
    </form>
</div>

<div th:replace="~{fragments/footer :: footer}">...</div>
<!-- My JavaScript -->

</body>

<!-- toolbar -->
<div id="userGrid-toolbar" style="padding:5px;"><!-- 上 右 下 左  -->
    <a href="javascript:void(0);" class="easyui-linkbutton" plain="true" permission="sys:user:add"
       iconCls="fa fa-plus" onclick="addUser()">添加</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" plain="true" permission="sys:user:del"
       iconCls="fa fa-trash" onclick="deleteUsers()">删除</a>
    <a href="javascript:void(0);" class="easyui-linkbutton" plain="true" permission="sys:user:resetPwd"
       iconCls="fa fa-key" onclick="resetPassword()">密码重置</a>
</div>

</html>


